import React from 'react'
import ReactDom from 'react-dom'
import {Map,Markers,InfoWindow } from 'react-amap'
import './index.less'
import axios from '../../axios/index'
import { Icon,Flex ,NavBar,Button} from 'antd-mobile';
const amapkey="75f47abd58d4983c07b4c18d7514ed9f";

export default class AMap extends React.Component{

  state = {
    markers: '',
    center: '',
    curVisibleWindow: false,
    posStr:'',
    pos:'',
    title:'测试标题',
    contact:'测试姓名',
    imagePath:'../uploadImg/车大大.jpg',
    tel:'13386170911',
    address:'测试地址',
    note:'测试备注',
    marker:''
   
  }
 
  constructor(){
    super();
    var _this = this;
    
    this.markersEvents = {
      click(e, marker){
        console.log('e:',e);       
        // 通过高德原生提供的 getExtData 方法获取原始数据
        const extData = marker.getExtData();
        const index = extData.myIndex;
        console.log('extData:',extData.position);
        // alert(`点击的是第${index}号坐标点`);
        _this.setState({
          curVisibleWindow:true,
          pos:extData.position,
          title:extData.title,
          contact:extData.contact,
          imagePath:extData.imagePath,
          tel:extData.tel,
          address:extData.address,
          note:extData.note,
          marker:marker,
          posStr:extData.posStr
        });
      }
    }
  }

 
  renderMarker=(extData)=>{
    return <div style={{backgroundColor:'red',height:'30px',width:'30px',color:'#fff', textAlign:'center',lineHeight:'30px'}}>{extData.myLabel}</div>
  }
  
  //构建自定义信息窗体
createInfoWindow=(title, content) =>{
  var info = document.createElement("div");
  info.className = "custom-info input-card content-window-card";

  //可以通过下面的方式修改自定义窗体的宽高
  //info.style.width = "400px";
  // 定义顶部标题
  var top = document.createElement("div");
  var titleD = document.createElement("div");
  var closeX = document.createElement("img");
  top.className = "info-top";
  titleD.innerHTML = title;
  closeX.src = "https://webapi.amap.com/images/close2.gif";
  closeX.onclick = this.closeInfoWindow;

  top.appendChild(titleD);
  top.appendChild(closeX);
  info.appendChild(top);

  // 定义中部内容
  var middle = document.createElement("div");
  middle.className = "info-middle";
  middle.style.backgroundColor = 'white';
  middle.innerHTML = content;
  info.appendChild(middle);

  // 定义底部内容
  var bottom = document.createElement("div");
  bottom.className = "info-bottom";
  bottom.style.position = 'relative';
  bottom.style.top = '0px';
  bottom.style.margin = '0 auto';
  var sharp = document.createElement("img");
  sharp.src = "https://webapi.amap.com/images/sharp.png";
  bottom.appendChild(sharp);
  info.appendChild(bottom);
  return info;
}

//关闭信息窗体
closeInfoWindow=()=> {
  this.setState({
    curVisibleWindow:!this.state.curVisibleWindow
  });
}
  
  componentDidMount(){
   
  }
    componentWillMount(){
     
      this.requestList();
    }   
     //请求markers列表
     requestList=()=>{
      axios.ajax({
        url:'/map/list',
        // url:'/api/v1/vas/shop',
        data:{}
      }).then((res)=>{
        if(res){    
          console.log('data::',res.data);    
          this.setState({
            markers:this.randomMarker(res.data)
          })
        }else{
          this.randomMarker('ssss');
        }
      })
  }
  randomPosition =function (data,pos){
    console.log('randomPositiondata:',data);  
    return{
      longitude: data[0],
      latitude: data[1]
    }  
    
  }
  randomMarker = (res) => (
    res.map((e, idx) => ({      
      posStr:e.position,
      position: this.randomPosition(e.position.split(",")),
      myIndex:idx,
      myLabel:idx,
      title:e.name,
      contact:e.contact,
      imagePath:e.imagePath,
      tel:e.tel,
      address:e.address,
      note:e.note
    }))
  ); 
   
    render(){     
     
      console.log('marker:',this.state.marker);
       //实例化信息窗体
      let content=[];
      content.push(`<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：${this.state.address}`);
      content.push(`联系人：${this.state.contact}`);
      content.push(`电话：${this.state.tel}`);
      content.push(`备注：${this.state.note}`);
      content.push(`<button onclick={openAMap.bind('aa','bb')}>详细信息</button>`);
    
      const openAMap=(a,b)=>{
        alert('aaa');
    }

      const mapEvents = {
        created: (mapInstance) => {
          // console.log('mapInstance:',mapInstance);
         let center= mapInstance.getCenter();
        //  console.log('center:',center);
         mapInstance.getCity(function(result){
          //  console.log('result:',result);
         })
        
        },
        click: () => {
          console.log('You clicked map');
        },
      }
      
        const plugins = [
            'MapType',
            'Scale',
            'OverView',
            'ControlBar', // v1.1.0 新增
            {
              name: 'ToolBar',
              options: {
                autoPosition:true,
                visible: true,  // 不设置该属性默认就是 true
                onCreated(ins){
                  // console.log('create：',ins);
                },
              },
            }
          ]
        return(
            <div id='amap'>
             <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/mine'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >服务网点</NavBar>
            <Flex>
              <Flex.Item>
                <select>
                  <option>距离筛选</option>
                  <option>200米</option>
                  <option>300米</option>
                  <option>400米</option>
                </select>  
              </Flex.Item>
             
            </Flex>
              
             <div>
            
             </div>
                <Map 
                // ref={(locat)=>this.mapa = locat}
                    amapkey={amapkey}
                    plugins={plugins}
                    zoom={6}  useAMapUI
                    events={mapEvents} 
                    
                >
                    <Markers 
                      markers={this.state.markers}
                      render={this.renderMarker}
                      events={this.markersEvents}                
                    />
                     <InfoWindow
                      position={this.state.pos}
                      visible={this.state.curVisibleWindow}
                      isCustom={true}//使用自定义窗体
                      offset={[10,-20]}
                      content={this.createInfoWindow(this.state.title, content.join('</br>'))}
                    >
                   
                    </InfoWindow>
                </Map>
            </div>
        );
    }
}